<template>
    <div>
        <div class="top-header">
            <span class="top-breadCrumb">我的待办流程:</span>
            <div class="mySearchCom">
                <el-input placeholder="请输入内容" size="mini" class="inputCom"></el-input>
                <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini">重置</el-button>
                <el-button type="primary" icon="el-icon-edit" size="mini">归档查询</el-button>
                <el-button type="primary" size="mini"><i class="iconfont icon-screening"></i>更多筛选</el-button>
            </div>
        </div> 
        <div class="search-panel">
            <el-form :inline="true" size="mini" label-width="80px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="审批状态:">
                            <el-select placeholder="请选择" :value="1">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="审批人:">
                            <el-input  placeholder="审批人"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="活动时间:">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" style="width:120px;"></el-date-picker>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-time-picker type="fixed-time" placeholder="选择时间"  style="width:120px;"></el-time-picker>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="grid-panel">
            <div class="listButton">
                <el-button type="primary" icon="el-icon-download" size="mini">导出</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                height="320"
                style="width: 100%;">
                <el-table-column
                    type="selection"
                    align="center"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="地址">
                </el-table-column>
            </el-table>
            <div class="page">
                <div class="left">
                    <span>页大小</span>
                    <a :class="{on : pageSize == item}" v-for="item in pageSizes" :key="item"
                     @click="pageSize = item"
                    >{{item}}</a>
                </div>
                <div class="right">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="100">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            options:[
                {label:"未审核",value:0},
                {label:"已审核",value:1}
            ],
             tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
            }],
            currentPage:1,
            pageSizes:[10,20,30],
            pageSize:10
        }
    },
    methods:{
        handleSizeChange(val) {
            // eslint-disable-next-line
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // eslint-disable-next-line
            console.log(`当前页: ${val}`);
        }
    }
}
</script>
<style scoped>
.search-panel .el-select{
    width:88%;
}

.listButton{
    text-align: left;
    margin-bottom: 10px;
}

.page{
    display: flex;
    margin-top:5px;
}

.page .left{
    -ms-flex: 1;
    flex: 1;
    text-align: left;
}

.left a{
    padding: 0 2px;
    font-size: 13px;
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.left a.on{
    background: #4ca8fc;
    color: #fff;
}

.page .right{

}
</style>
